<template>
	<view>
		<view class="edgeInsetTop"></view>
		<form @submit="formSubmit">
			<view class="cu-list menu solid-bottom">
				<view class="cu-item arrow" style="min-height:150rpx;" @tap="Avatar">
					<view class="content">
						<text style="font-size: 30rpx;">头像</text>
					</view>
					<view class="action">
						<view class="cu-avatar round lg"
							:style="{backgroundImage: 'url('+ $wanlshop.oss(user.avatar, 52, 52, 2, 'avatar') +')'}">
						</view>
					</view>
				</view>
			</view>
			<!-- 我的代码 -->
			<view class="cu-form-group">
				<view class="title">用户手机号</view>
				<view class="title">{{user.mobile|| '-'}}</view>
				<!-- <input placeholder="请输入手机号" name="nickname" :value="user.mobile"></input> -->
			</view>
			<view class="cu-form-group" @tap="toChoose(permanentText)" style="display: block;">
				<view class="title">常住地址:</view>
				<view class="add">{{ permanentText|| '请选择常住地址'}}</view>
			</view>
			<view class="line">

			</view>
			<!-- <checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause"
				@change="CheckboxChange">
				<checkbox class="orange" :class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false"
					value="2" />
				<view>
					授权即表示已同意<text>《用户协议》</text>及<text>《隐私权保护声明》</text>
				</view>
			</checkbox-group> -->
			<!-- 原代码 -->
			<!-- <view class="cu-form-group">
				<view class="title">昵称</view>
				<input placeholder="请输入昵称" name="nickname" :value="user.nickname"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">用户名</view>
				<input placeholder="请输入用户名" name="username" :value="user.username"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">个性签名</view>
				<input placeholder="请输入个性签名" name="bio" :value="user.bio"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">性别</view>
				<view style="display: none;">
					<input name="gender" :value="genderdata" disabled></input> 
				</view>
				<switch class='switch-sex' @change="Gender" :class="gender?'checked':''" :checked="gender?true:false"></switch>
			</view>
			<view class="cu-form-group">
				<view class="title">日期选择</view>
				<picker mode="date" :value="user.birthday || '1992-08-23'" @change="DateChange">
					<view style="display: none;">
						<input name="birthday" :value="user.birthday" disabled></input>
					</view>
					<view class="picker">
						{{user.birthday || '1992-08-23'}}
					</view>
				</picker>
			</view> -->
			<view class="padding-bj flex flex-direction" style="margin-top: 88%;">
				<!-- <button form-type="submit" class="cu-btn wanl-bg-redorange margin-tb lg">完成</button> -->
				<button class="cu-btn line-red lg" @tap="logout()">退出登录</button>
			</view>
		</form>

	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker';
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['user'])
		},
		data() {
			return {
				gender: true,
				genderdata: 0,
				permanentText: ''
			}
		},
		onLoad() {
			//中央总线重新赋值Data
			this.gender = this.$store.state.user.gender == 0 ? true : false;
			this.genderdata = this.$store.state.user.gender;	
		},
		onShow() {
			this.loadData()
		},
		methods: {
			// 选择常驻地址
			toChoose(add) {
				console.log(add, 'add')
				if (!add) {
					this.$wanlshop.to('/pages/user/address/addressManage?type=1');
				}
			},
			async loadData() {
				await uni.request({
					url: '/wanlshop/user/refresh',
					method: 'POST',
					success: res => {
						// let address = res.data.userinfo.permanent ? JSON.parse(res.data.userinfo
						// 	.permanent) : ''
						// this.permanentText = address.formatted_address + address.address_full
						this.permanentText = res.data.userinfo.permanent ? res.data.userinfo.permanent :''
						console.log('permanentText', this.permanentText)
					}
				});
			},
			logout() {
				this.$store.dispatch('chat/logout');
				this.$wanlshop.msg('退出成功');
				this.$wanlshop.back(1);
			},
			DateChange(e) {
				this.$store.state.user.birthday = e.detail.value
			},
			Gender(e) {
				if (e.detail.value == true) {
					this.gender = true;
					this.genderdata = 0;
				} else {
					this.gender = false;
					this.genderdata = 1;
				}
			},
			Avatar() {
				this.$wanlshop.to('/pages/user/portrait/portrait');
			},
			formSubmit: function(e) {
				//定义表单规则

				let rule = [{
						name: 'username',
						checkType: 'string',
						checkRule: '3,32',
						errorMsg: '用户名，至少3-32字符'
					},
					{
						name: 'nickname',
						checkType: 'string',
						checkRule: '3,32',
						errorMsg: '昵称，至少3-32字符'
					}
				];
				//进行表单检查
				let formData = e.detail.value;
				let checkRes = graceChecker.check(formData, rule);
				// ..检查是否注册-没注册跳转注册
				if (checkRes) {
					uni.request({
						url: '/wanlshop/user/profile',
						method: 'POST',
						data: formData,
						success: res => {
							// 保存用户信息
							this.$store.commit('user/setUserInfo', formData);
							// 提示
							this.$wanlshop.msg('保存成功');
						}
					});
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			}
		}
	}
</script>


<style>
	@import url("@/pages/user/auth/auth.css");

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.cu-form-group .add {
		line-height: 44rpx;
		padding-bottom: 20rpx;
	}

	.line {
		background: 2rpx #d9d9d966;
		width: 100%;
		height: 2rpx;
	}

	.orange {
		border-radius: 50% !important;
	}

	.cu-form-group input {
		text-align: right;
	}

	.wanl-bg-redorange {
		background: #252525 !important;
	}
</style>